<template>
  <div class="manu">
    <div>
      <h4>咚咚出版社</h4>
      <ul style="    font-weight: bold;">
        <li><router-link class="list-group-item" active-class="active" to="/home">首页</router-link></li>
        <li><router-link class="list-group-item" active-class="active" to="/paybook">购买图书</router-link></li>
        <li><router-link class="list-group-item" active-class="active" to="/thingsdownload">资料下载</router-link></li>
        <li><router-link class="list-group-item" active-class="active" to="/onlineAudio">在线音频</router-link></li>
        <li><router-link class="list-group-item" active-class="active" to="/article">文章专题</router-link></li>
<!--        <li>购书指南</li>-->
<!--        <li>关于我们</li>-->
<!--        <li><i class="el-icon-message-solid">在线客服</i></li>-->
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Manu"
}
</script>

<style scoped>
*{margin: 0;padding: 0;list-style: none;}
.manu>div>h4{
  float: left;
  font-size: 24px;
  width: 326px;
  height: 43px;
  background-color: #e74c3c;
  line-height: 48px;
  text-align: center;
}
.manu{
  width: 100%;
  height: 42px;
  background-color: #3498db;
}
.manu>div{
  width: 72em;
  height: 100%;
  margin: 0 auto;
  color: white;
  overflow: hidden;
}
.manu>div>ul>li{
  float: left;
  line-height: 37px;
  width: 74px;
  margin-right: 5.2em;
  text-align: center;
  margin-left: 2px;
}
.manu>div>ul{
  overflow: hidden;
}
a{
  color: white;
}
a:hover{
  color: #f1c40f;
  /*text-decoration: underline;*/

}
.active{
  /*text-decoration:underline;*/
  text-decoration-color: lightcoral;
  color: #f1c40f;
}
</style>